<template>
	<view v-for="([key, value], index) in Object.entries(formGroup.controls)" :key="index" class="control">
		<template v-if="value.selector === 'input'">
			<selector-input :formControl="value" />
		</template>
		<template v-else-if="value.selector === 'password'">
			<selector-password :formControl="value" />
		</template>
		<template v-else-if="value.selector === 'picker'">
			<selector-picker :formControl="value" />
		</template>
		<template v-else-if="value.selector === 'textarea'">
			<selector-textarea :formControl="value" />
		</template>
		<template v-else-if="value.selector === 'select'">
			<selector-select :formControl="value" />
		</template>
		<template v-else>
			<selector-input :formControl="value" />
		</template>
	</view>
</template>

<script>

	import selectorInput from '../lib-selector-input/lib-selector-input.vue';
	import selectorPassword from '../lib-selector-password/lib-selector-password.vue';
	import selectorPicker from '../lib-selector-picker/lib-selector-picker.vue';
	import selectorTextarea from '../lib-selector-textarea/lib-selector-textarea.vue';
	import selectorSelect from '../lib-selector-select/lib-selector-select.vue';

	export default {
		name: 'lib-form-group',
		components: {
			selectorInput,
			selectorPassword,
			selectorPicker,
			selectorTextarea,
			selectorSelect,
		},
		emit: ['ready'],
		props: {
			formGroup: {
				type: Object,
				default: () => {
					return null;
				},
				required: true,
			}
		},
		data() {
			return {}
		},
		methods: {},
		mounted() {},
		watch: {},
	}
</script>




<style lang="scss" scoped>
	// @import "./home.scss";
</style>